import React from 'react'
import { withRouter } from "react-router-dom";
import CryptoJs from 'crypto-js'
import { Form, Input, Button, Checkbox,Col,Row, message } from 'antd';
import {setToken,setUsername } from '../../utils/cookies'
import {Login} from '../../api/account'
const layout = {
    labelCol: {
    span: 8,
    },
    wrapperCol: {
    span: 16,
    },
}
const tailLayout = {
    wrapperCol: {
    offset: 8,
    span: 16,
    },
}
class LoginForm extends React.Component{
    state={ischecked:true,loading:false}
    onFinish = (values) => {
          let passwordObject = {password:CryptoJs.MD5(values.password).toString()}
          let requestData=Object.assign(values,passwordObject)
          Login(requestData).then(response=>{
            this.setState({loading:true})
            console.log(response);
            if(response.data == 201)
             message.warn('用户名密码错误')
            else{
              message.success('登录成功')
              setToken(response.data.token)
              setUsername(response.data.username)
              this.props.history.push('/index');
            }
            this.setState({loading:false})
          }).catch(err=>{
            console.log(err);
          })
          
        };
      
    onFinishFailed = (errorInfo) => {console.log('Failed:', errorInfo);};
    
    render(){
    return (
    <Form {...layout} name="basic"  initialValues={{  remember: true,}} onFinish={this.onFinish}  onFinishFailed={this.onFinishFailed}>
      <Form.Item label="邮箱用户名" name="username" rules={[{required: true,message: '请输入邮箱用户名',},]}>
        <Col span={19}>
        <Input placeholder="请输入邮箱用户名"/>
        </Col>
      </Form.Item>

      <Form.Item label="密码" name="password" rules={[{required: true,message: '请输入六位密码',len:6},]} >
          <Col span={19}>
          <Input.Password placeholder="请输入密码"/>
          </Col>
      </Form.Item>

    
        <Form.Item> 
            <Row>
                <Col offset={12}> 
                <Form.Item>
                    <Button type="primary" htmlType="submit" loading={this.state.loading}> 登录 </Button>  
                </Form.Item>
                </Col>
            <Col  offset={4}>
            <Form.Item name="remember">
                <Checkbox checked={this.state.ischecked}>记住我</Checkbox>
            </Form.Item>
            </Col>
            </Row>
        </Form.Item>
    </Form>
  )
}
}

export default withRouter(LoginForm)